<template>
  <div class="trading-dashboard">
      <div class="dashboard-container">
          <div class="dashboard">
              <el-row class="row-card"  :gutter="10" >
                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                  <div class="grid-content">
                      <div><span>今日成交</span><span v-html="dashboard.daysum.transactionCount"></span><span>(筆)</span></div>
                      <div><span>充值：</span><span v-html="dashboard.daysum.rechargeCount"></span><span>筆</span></div>
                      <div><span>提现：</span><span v-html="dashboard.daysum.withdrawCount"></span><span>筆</span></div>
                      <div><span>购买：</span><span v-html="dashboard.daysum.buyGoodsCount"></span><span>筆</span></div>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                  <div class="grid-content">
                      <div>今日充值（元）</div>
                      <div v-html="dashboard.daysum.RechargeSum"></div>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                  <div class="grid-content">
                        <div>今日提现（元）</div>
                        <div v-html="dashboard.daysum.withdrawSum"></div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row-card" :gutter="10"  >
                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                  <div class="grid-content">
                      <div><span>当月成交</span><span v-html="dashboard.monthsum.transactionCount"></span><span>(筆)</span></div>
                      <div><span>充值：</span><span v-html="dashboard.monthsum.rechargeCount"></span><span>筆</span></div>
                      <div><span>提现：</span><span v-html="dashboard.monthsum.withdrawCount"></span><span>筆</span></div>
                      <div><span>购买：</span><span v-html="dashboard.monthsum.buyGoodsCount"></span><span>筆</span></div>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                  <div class="grid-content">
                      <div>本月充值（元）</div>
                      <div v-html="dashboard.monthsum.RechargeSum"></div>
                  </div>
                </el-col>
                <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                  <div class="grid-content">
                      <div>本月提现（元）</div>
                      <div v-html="dashboard.monthsum.withdrawSum"></div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="row-card" :gutter="10">
                 <el-col :xs="24" :sm="24" :md="12"> 
                     <div class="echarts-content">
                          <vue-echarts class="vue-echarts" :auto-resize="true" :options = "echartOption" />                  
                    </div>                
                   
                 </el-col>
                 <el-col :xs="24" :sm="24" :md="12">
                     <div class="echarts-content">
                          <vue-echarts class="vue-echarts" :auto-resize="true" :options = "echartOption" />                  
                    </div>
                 </el-col>
              </el-row>
          </div>
      </div>
  </div>
</template>

<script>
const option ={
    title: {
        text: ''
    },
    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            areaStyle: {normal: {}},
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
import VueEcharts from "vue-echarts";
import USB from "@/utils/USB.js"; // 获取url

export default {
  name:'trading-dashboard',
  data () {
    return {
        echartOption:option,
        dashboard:{
            daysum:{
                transactionCount:0,
                rechargeCount:0,
                withdrawCount:0,
                buyGoodsCount:0,
                RechargeSum:"0.00",
                withdrawSum:"0.00"
            },
            monthsum:{
                transactionCount:0,
                rechargeCount:0,
                withdrawCount:0,
                buyGoodsCount:0,
                RechargeSum:"0.00",
                withdrawSum:"0.00"
            },
            allsum:{
                transactionCount:0,
                rechargeCount:0,
                withdrawCount:0,
                buyGoodsCount:0,
                RechargeSum:"0.00",
                withdrawSum:"0.00"
            }
        }
    };
  },
  components: {VueEcharts},
  created() {
      this.init()
  },
  mounted() {},
  methods: {
      init(){
          this.queryDashboard();
      },
      queryDashboard(){
          // 交易数据汇总
          this.$Http.post(USB.U52,null).then(res=>{
               if(res.data.resp_code === "000000"){
                    // domesomething ..
                    this.dashboard = res.data.result;
                }else{
                this.$notify.info({
                    title: '消息',
                    message: res.data.resp_message
                    });
                }
            }).catch(err=>{
                this.$notify.error({
                    title: '错误',
                    message: '获取交易汇总数据失败！'
                });
            })

      }
     
  }
}

</script>
<style scoped>
  .trading-dashboard{
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     overflow-y: scroll;
     overflow-x: hidden;
     padding: 5px 10px;
  }
  .dashboard-container{
    box-sizing: border-box;
    padding: 14px;
  }
  .grid-content{
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    margin: 10px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    padding: 10px 0;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5)
  }
   .grid-content:hover{
       box-shadow: 0 0 4px 0 rgba(0,0,0,0.5)
   }
  .echarts-content{
      width: 100%;
      height: 400px;
      box-sizing: border-box;
      margin: 20px;
      border: 1px solid #eeeeee;
      border-radius: 5px;
  }
  .row-card{
    padding: 10px 0;
  }
  .vue-echarts{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5)
  }
  .vue-echarts:hover{
      box-shadow: 0 0 4px 0 rgba(0,0,0,0.5)
  }
  .dashboard{
      text-align: center;
  }
</style>